<template>
  <div v-if="Object.keys(comment).length !== 0" class="comment-info">
       <div class="info-header">
           <div class="header-title">用户评论</div>
           <div class="header-more">更多<i class="arrow-right"></i></div>
       </div>
       <div class="info-user">
         <img :src="comment.user.avatar" alt="">
         <span>{{comment.user.uname}}</span>
       </div>
       <div class="info-detail">
           <p class="con">{{comment.content}}</p>
           <div class="info-other">
              <span class="date">{{comment.created | formatDate }}</span>
              <span>{{comment.style}}</span>
           </div>
           <div class="info-imgs">
              <img :src="item" v-for="(item,index) in comment.images" :key="index" alt="">
           </div>
       </div>
  </div>
</template>
<script>
import { formatDate } from 'common/utils.js'
export default {
  name: 'DetailComment',
  components: {  },
  props:{
      comment:{
         type:Object,
         default(){
           return {}
         }
      }
  },
  directives: {  },
  data() {
    return {
 
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
  filters:{
   formatDate (time) {
		  const date = new Date(time*1000)
		  return formatDate(date, 'yyyy-MM-dd hh:mm')
	 }
  }
};
</script>
<style scoped>
  .info-header{
    height:30px;
    display: flex;
    justify-content: space-between;
    padding:0 10px;
    font-size: 15px;
    border-bottom: 1px solid #ccc;
    margin:5px 0;
  }
  .info-user{
    height: 30px;
    display: flex;
    justify-content: left;
    padding:0 10px;
  }
   .info-user img{
     display: block;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     overflow: hidden;
   }
    .info-user span{
      display: block;
      font-size: 16px;
      color: #000;
      text-align: justify;
      line-height: 30px;
      margin-left: 10px;
    }
    .info-detail{
      margin:5px auto 0;
      padding:0 10px;
    }
    .info-detail .con{
      font-size: 15px;
      color:#000;
      text-align: justify;
      line-height: 20px;
    }
    .info-other{
      margin:5px auto;
      padding:0 10px;
      font-size: 16px;
      color: #000;
      text-align: justify;
    }
    .info-other span{
      margin-right: 5px;
    }
    .info-imgs{
      margin:5px auto 0;
      text-align: justify;
      font-size: 0;
      padding:0 10px;
    }
    .info-imgs img{
      display: inline-block;
      vertical-align: top;
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
</style>